<!DOCTYPE html>
<html lang="en" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>APP注册用户</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/js/jquery-2.0.3.js"></script>
    <script src="/layui/layui.all.js"></script>
    <script src="/js/core.util.js"></script>
    <script src="/js/laydate.js"></script>
    <script src="/js/echarts/echarts.min.js"></script>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/custom.form.css">
    <style>
        table tr td {
            border-collapse:collapse;
        }
        td {
            border-collapse:collapse;
        }
        tr  {
            border-collapse:collapse;
        }
        .memberData {
            width: 100%;
            margin: 0 auto;
        }

        .e-chart {
            position: relative;
            height: 380px;
            width: 500px;
            margin-right: 22px;
            float: left;
            background: #fff;
            padding-left: 18px;
            margin-top: 20px;
        }

        .e-chart-style {
            width: 100%;
            height: 260px;
        }

        .newaddmember_t {
            winth: 100%;
            line-height: 30px;
            height: 30px;
            color: #666;
            font-size: 12px;
            padding-right: 18px;
        }

        .newaddmember_t .underline {;
            border-bottom: 1px solid #eee;
            font-size: 13px;
            color: black;
            font-weight: bold;
        }

    </style>

</head>
<body>
<script src="/js/laydate.js"></script>
<script>


</script>


    <div class="layui-form-item">
        <div class="layui-card-header">
            近期数据一览
        </div>

        <div class="layui-input-inline" style="width: 25%;margin-left: 10px;"><img src="/images/1.png" style="width: 100px;height: 100px;" class="layui-form-label"/> <br/><br/><span id="allcount" > </span>人<br/> 注册总数
            </div>


        <div class="layui-input-inline" style="width: 24%">      <img src="../images/2.png" style="width: 100px;height: 100px;" class="layui-form-label"/> <br/><br/>  <span id="daycount" > </span>人<br/>日注册数
            </div>

        <div class="layui-input-inline" style="width: 24%">    <img src="../../images/3.png" style="width: 100px;height: 100px;" class="layui-form-label" /> <br/><br/>  <span id="weekcount" > </span>人<br/>周注册数
            </div>

        <div class="layui-input-inline" style="width: 24%">    <img src="/images/4.png" style="width: 100px;height: 100px;" class="layui-form-label" /> <br/><br/>  <span id="monthCount" > </span>人<br/>月注册数
        </div>
    </div>
    <div class="layui-form-item">历史数据
        <div class="layui-inline">
        <label class="layui-form-label">年选择器</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="test2" placeholder="请选择" >
        </div>
            <div class="layui-input-inline">
                <button class="layui-btn" id="search"  onclick="blurs()" >
                    <span class="layui-icon layui-icon-search"></span>查询
                </button>
            </div>
        </div>
    </div>
        <div class="layui-colla-content layui-show">

            <table class="layui-table" id="languageObject_table" lay-filter="languageObject_table" lay-skin="line">
                <tr>
                    <td>月份</td>
                    <td>注册数</td>
                    <td>月份</td>
                    <td>注册数</td>
                </tr>
                <tr>
                    <td>1月</td>
                    <td><span id="ocount" > 0</span>人</td>
                    <td>2月</td>
                    <td><span id="tcount" >0 </span>人</td>
                </tr>
                <tr>
                    <td>3月</td>
                    <td><span id="trcount" > 0</span>人</td>
                    <td>4月</td>
                    <td><span id="fcount" >0 </span>人</td>
                </tr>
                <tr>
                    <td>5月</td>
                    <td><span id="ffcount" >0 </span>人</td>
                    <td>6月</td>
                    <td><span id="scount" > 0</span>人</td>
                </tr>
                <tr>
                    <td>7月</td>
                    <td><span id="sscount" >0 </span>人</td>
                    <td>8月</td>
                    <td><span id="ecount" >0 </span>人</td>
                </tr>
                <tr>
                    <td>9月</td>
                    <td><span id="ncount" > 0</span>人</td>
                    <td>10月</td>
                    <td><span id="ttcount" > 0</span>人</td>
                </tr>
                <tr>
                    <td>11月</td>
                    <td><span id="eecount" > 0</span>人</td>
                    <td>12月</td>
                    <td><span id="ewcount" >0 </span>人</td>
                </tr>

            </table>
        </div>
    <div class="layui-colla-item">
        <div class="underline">年注册量趋势图</div>
        <div class="layui-colla-content layui-show">
            <div class="e-chart">
                <div class="e-chart-style" shiro:hasPermission="echarts:userEcharts" id="mychart1" style="width: 1200px;height: 400px;"></div>
            </div>
        </div>
    </div>


<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('mychart1'));
    let table = layui.table
    //搜索条件
    let searchParam = {
        page: 1,
        pageSize: 10
    };
function blurs(){
   var datas=$("#test2").val();
    CoreUtil.sendAjax("/report/getStatisticsByHistoryAndMonth?year="+datas, null, function(res) {
        // console.log(res);
        var datas=JSON.stringify(res.data);
        datas=datas.replace("{","");
        datas=datas.replace("}","");
        arry =datas.split(",")
        xdata=[];
        ydata=[];
        for(var i=0;i<arry.length;i++){
            if(arry[i].split(":")[0].match("-07")){
                $("#sscount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-01")){
                $("#ocount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-02")){
                $("#tcount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-03")){
                $("#tcount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-04")){
                $("#fcount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-05")){
                $("#ffcount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-06")){
                $("#scount").html(arry[i].split(":")[1])
            }  if(arry[i].split(":")[0].match("-08")){
                $("#ecount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-09")){
                $("#ncount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-10")){
                $("#ttcount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-11")){
                $("#eecount").html(arry[i].split(":")[1])
            }
            if(arry[i].split(":")[0].match("-12")){
                $("#ewcount").html(arry[i].split(":")[1])
            }

        }

    }, "GET", false, function (res) {
        layer.msg("抱歉！您暂无获取列表的权限");
        let noAuthorityData = [];
        loadTable(noAuthorityData);
    });
}
    $(document).ready(function(){

        layui.use('laydate', function() {
            var laydate = layui.laydate;
            //年选择器
            laydate.render({
                elem: '#test2'
                ,type: 'year'
            });
        });
        var day1 = new Date();
       var lastdata=day1.getFullYear()-1;
        CoreUtil.sendAjax("/report/getStatisticsByHistoryAndMonth?year="+lastdata, null, function(res) {
            // console.log(res);
            var datas=JSON.stringify(res.data);
            datas=datas.replace("{","");
            datas=datas.replace("}","");
            arry =datas.split(",")
            xdata=[];
            ydata=[];
            for(var i=0;i<arry.length;i++){
                if(arry[i].split(":")[0].match("-07")){
$("#sscount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-01")){
                    $("#ocount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-02")){
                    $("#tcount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-03")){
                    $("#tcount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-04")){
                    $("#fcount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-05")){
                    $("#ffcount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-06")){
                    $("#scount").html(arry[i].split(":")[1])
                }  if(arry[i].split(":")[0].match("-08")){
                    $("#ecount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-09")){
                    $("#ncount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-10")){
                    $("#ttcount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-11")){
                    $("#eecount").html(arry[i].split(":")[1])
                }
                if(arry[i].split(":")[0].match("-12")){
                    $("#ewcount").html(arry[i].split(":")[1])
                }

            }

        }, "GET", false, function (res) {
            layer.msg("抱歉！您暂无获取列表的权限");
            let noAuthorityData = [];
            loadTable(noAuthorityData);
        });

        //近期数据一览表
        CoreUtil.sendAjax("/report/getStatisticsByCount", searchParam, function(res) {

            $("#allcount").html(res.data.allCount)
            $("#daycount").html(res.data.dayCount)
            $("#weekcount").html(res.data.weekCount)
            $("#monthCount").html(res.data.monthCount)
        }, "GET", false, function (res) {
            layer.msg("抱歉！您暂无获取列表的权限");
            let noAuthorityData = [];
            loadTable(noAuthorityData);
        });

///注册表

        CoreUtil.sendAjax("/report/getStatisticsByHistoryAndMonth?year="+day1.getFullYear(), null, function (res) {
           var datas=JSON.stringify(res.data);
            datas=datas.replace("{","");
            datas=datas.replace("}","");
            arry =datas.split(",")
            xdata=[];
            ydata=[];
           for(var i=0;i<arry.length;i++){
               xdata
               ydata.push(arry[i].split(":")[1])
           }
            option1 = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: xdata
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data:ydata,
                    type: 'line',
                    areaStyle: {}
                }]
            };
            myChart1.setOption(option1);
        }, "GET", false, function (res) {
            layer.msg(res.msg);
        });

        // //访问者归属地
        // CoreUtil.sendAjax("/sys/getIpAddressInfo", null, function (res) {
        //     // console.log(res);
        //     // console.log(res.data);
        //     if(res != null && res.data != null){
        //         let dataArray = res.data;
        //         // console.log(dataArray);
        //         let htmlStr = '';
        //         htmlStr += '<table class="layui-table">';
        //         htmlStr += '<colgroup>';
        //         htmlStr += '<col width="190">';
        //         htmlStr += '<col width="150">';
        //         htmlStr += '</colgroup>';
        //         htmlStr += '<tbody>';
        //         htmlStr += '<tr>';
        //         htmlStr += '<td style="font-size: 17px;color: #333333;font-weight: bold;">访问归属地</td>';
        //         htmlStr += '<td>';
        //         htmlStr += '<p style="font-size: 17px;color: #333333;font-weight: bold;">次数</p>';
        //         htmlStr += '</td>';
        //         htmlStr += '</tr>';
        //         for(var i=0; i<dataArray.length; i++){
        //             htmlStr += '<tr>';
        //             htmlStr += '<td>' + dataArray[i].name + '</td>';
        //             htmlStr += '<td>';
        //             htmlStr += '<p style="padding-left: 15px;">' + dataArray[i].value + '</p>';
        //             htmlStr += '</td>';
        //             htmlStr += '</tr>';
        //         }
        //         htmlStr += '</tbody>';
        //         htmlStr += '</table>';
        //         $("#ipAddressHtml").html(htmlStr);
        //     }
        // }, "GET", false, function (res) {
        //     layer.msg(res.msg);
        // });



    });
    // //分页条
    // let laypageTable = function (count, currentPage) {
    //     laypage.render({
    //         elem: 'laypage'
    //         , count: count
    //         , limit: searchParam.pageSize
    //         , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
    //         , curr: location.hash.replace('#!currentPage=', '') //获取起始页
    //         , hash: 'currentPage' //自定义hash值
    //         , limits: [10, 25, 50, 100, 300, 500, 2000]
    //         , jump: function (obj, first) {
    //             if (!first) {
    //                 searchParam.page = obj.curr;
    //                 searchParam.pageSize = obj.limit;
    //                 CoreUtil.sendAjax("/dLanguage/selectLanguageIsPage", searchParam, function (res) {
    //                     if (res.data.records != null) {
    //                         loadTable(res.data.records);
    //                         laypageTable(res.data.total, searchParam.page);
    //                     }
    //                 }, "GET", false, function (res) {
    //                     layer.msg("抱歉！您暂无获取列表信息的权限");
    //                     let noAuthorityData = [];
    //                     loadTable(noAuthorityData);
    //                 });
    //
    //             }
    //         }
    //     });
    // };

    // //渲染table
    let loadTable = function (data) {
        table.render({
            elem: '#languageObject_table'
            , cols: [
                [
                    {title: '月份', width: '40%', style:'cursor: pointer;' }
                ]
            ]
            , data: data
            , loading: true
        });
    };

</script>
</body>
</html>